<!DOCTYPE html>
<html>
<head>
	<title> 3d轮播图 </title>
	<meta content="text/html" charset="utf-8" />
<style>
	*{margin:0; padding:0;}
	body{
		background:#000;
		perspective:1200px;}
	.box{
		position:relative;
		width:600px;height:600px; margin:0 auto;
		/* border:1px solid #fff; */
		border-radius:50%;
		transform-style:preserve-3d;
		transform:rotateX(88deg);			/* 整体视角 */
	}
	.box .fun{
		position:absolute;top:50%;left:50%; margin-top:-300px;margin-left:-300px;
		width:600px; height:600px;
		transform-style:preserve-3d;
		animation:move 24s linear infinite;		/* 动画1 */
	}
/* 动画1 */
	.box .fun:hover{
		animation-play-state:paused;		/* 暂停动画 */
	}
	@keyframes move{
		0%{transform:rotateZ(0deg);}
		50%{transform:rotateZ(180deg);}
		100%{transform:rotateZ(360deg);}
	}
/* 动画1 */
	.box .fun div{
		position:absolute;top:50%;left:50%; margin-top:-135px;margin-left:-77px;
		width:154px; height:270px;
		transform-style:preserve-3d;
	}
	.box .fun div img{
		width:154px;
		-webkit-box-reflect:below 5px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.5));
		animation:moved 24s linear infinite;		/* 动画2 */
	}
/* 动画2 */
	.box .fun:hover div img{
		animation-play-state:paused;
	}
	@keyframes moved{
		0%{transform:rotateY(0deg);}
		50%{transform:rotateY(180deg);}
		100%{transform:rotateY(360deg);}
	}
/* 动画2 */
/* 3d定位 */
	.box .fun div:nth-child(1){
		transform:translate(0,400px) rotateX(-90deg);
	}
	.box .fun div:nth-child(2){
		transform:translate(240px,240px) rotateX(-90deg);
	}
	.box .fun div:nth-child(3){
		transform:translate(400px,0) rotateX(-90deg);
	}
	.box .fun div:nth-child(4){
		transform:translate(240px,-240px) rotateX(-90deg);
	}
	.box .fun div:nth-child(5){
		transform:translate(0,-400px) rotateX(-90deg);
	}
	.box .fun div:nth-child(6){
		transform:translate(-240px,-240px) rotateX(-90deg);
	}
	.box .fun div:nth-child(7){
		transform:translate(-400px,0) rotateX(-90deg);
	}
	.box .fun div:nth-child(8){
		transform:translate(-240px,240px) rotateX(-90deg);
	}
</style>
</head>
<body>
	<div class="box">
		<div class="fun">	
		<div>
			<img src="LoL/demo2/201.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/202.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/203.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/204.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/205.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/206.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/207.jpg" alt=""/>
		</div>
		<div>
			<img src="LoL/demo2/208.jpg" alt=""/>
		</div>
		</div>
	</div>
</body>
</html>